html,
body {
    width: 100%;
}

.container {
    width  : 100%;
    padding: 0;
}

.panel-body {
    padding-top   : 0;
    padding-bottom: 0;
}

#area,
#products {
    user-select: none;
}

#area label,
#products label {
    margin-right  : 10px;
    font-size     : 16px;
    font-weight   : 400;
    vertical-align: middle;
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    padding: 3px 8px;
}

.charts {
    width   : 100%;
    overflow: hidden;
}

#main {
    box-sizing: border-box;
}

#line {
    box-sizing: border-box;
}

#table-wrapper .table tbody td {
    position  : relative;
}

#table-wrapper .table tbody td.select {
    background-color: #fff;
}

#table-wrapper .table tbody td.select:hover {
    background-color: #fff;
}
#table-wrapper .table tbody td.select .edit {
    display: block;
}

.icon {
    position: absolute;
    right   : 8px;
    top     : 6px;
    display : none;
    cursor  : pointer;
}

.edit {
    position: absolute;
    top     : 0;
    bottom  : 0;
    right   : 0;
    left    : 0;
    display : none;
    z-index : 36;
    color   : #333;
}

.edit input {
    width  : 100%;
    height: 100%;
    padding-left: 3px;
    border          : 2px solid #37A2DA;
    outline: 0;
}

.edit span {
    position : absolute;
    z-index  : 38;
    padding  : 0;
    font-size: 12px;
    cursor   : pointer;
}

.edit span:hover {
    color: #37A2DA;
}

.edit span:nth-child(3) {
    right: 3px;
    top  : 6px;
}

.edit span:nth-child(2) {
    right: 20px;
    top  : 6px;
}

#table-wrapper .table tbody td:hover {
    background-color: #37A2DA;
    color           : #fff;
}
#table-wrapper .table tbody td:hover .icon {
    display: block;
}

#table-wrapper .table tbody td .icon:hover {
    color: #ff9f7f;
}